<template>
  <div>
    <my-search
      :layout="formItems"
      :model="model"
      :form-conf="searchConf"
      class="myLayoutTop mySearch"
      @btnClick="mySearchBtnClick"
    ></my-search>
    <my-table
      :data="tableData"
      :columns="tableColumns"
      :opt-conf="tableOptConf"
      :btn-conf="tableBtnConf"
      class="myLayoutCenter"
      @optClick="myTableOptClick"
      @btnClick="myTableBtnClick"
      @currentChange="currentChange"
      @sizeChange="sizeChange"
    ></my-table>
    <!-- 新增 -->
    <add
      v-if="dialog.add"
      @closed="closed('add')"
      @success="success('add')"
    ></add>
    <!-- 修改 -->
    <modify
      v-if="dialog.modify"
      :model="activeRow"
      @closed="closed('modify')"
      @success="success('modify')"
    ></modify>
  </div>
</template>

<script>
import {
  delFormNullParam,
  formItemsGetByName
} from '../../../components/common/common'
import Add from './add'
import Modify from './modify'
import MyTable from '@/components/base/myTable'
import MySearch from '@/components/base/mySearch'
import menu from '@/components/mixins/menu'

export default {
  name: 'Enjoy',
  components: { Modify, Add, MySearch, MyTable },
  mixins: [menu],
  layout: 'Admin',
  data() {
    return {
      model: {
        name: null,
        functionName: null,
        groupName: null
      },
      formRowConf: {
        gutter: 20,
        type: 'flex',
        justify: 'start',
        align: 'middle'
      },
      searchConf: {
        labelSuffix: null,
        inline: true,
        labelWidth: '1px'
      },
      formItems: [
        {
          elFormItem: {
            prop: 'name',
            label: '',
            type: 'input',
            placeholder: '请输入模板名称'
          }
        },
        {
          elFormItem: {
            prop: 'functionName',
            label: '',
            type: 'autocomplete',
            placeholder: '请输入所属功能',
            options: []
          }
        },
        {
          elFormItem: {
            prop: 'groupName',
            label: '',
            type: 'autocomplete',
            placeholder: '请输入组名',
            options: []
          }
        }
      ],
      tableData: {},
      tableColumns: [
        { type: 'selection' },
        { label: '序号', type: 'index' },
        { prop: 'name', label: '模板名称' },
        { prop: 'functionName', label: '所属功能', showOverflowTooltip: true },
        { prop: 'groupName', label: '组名', showOverflowTooltip: true },
        { prop: 'updateTime', label: '最后一次更新时间' }
      ],
      tableOptConf: {
        optShow: true,
        buttons: [
          { name: '修改' },
          { name: '删除' },
          { name: '使用' },
          { name: '恢复默认模板' }
        ]
      },
      tableBtnConf: {
        show: true,
        buttons: [{ name: '新增' }, { name: '全部恢复默认模板' }]
      },
      dialog: { add: false, modify: false },
      activeRow: {},
      page: {
        current: 1,
        size: 10
      },
      functionTypes: null
    }
  },
  watch: {
    'model.functionName': {
      handler() {
        this.page.current = 1
        this.getTypes()
      },
      deep: true
    },
    'model.groupName': {
      handler() {
        this.page.current = 1
        console.log('current' + this.page.current)
      },
      deep: true
    }
  },
  created() {
    this.getInitData()
    this.getFunctionOptions()
  },
  mounted() {},
  methods: {
    myTableBtnClick(btnItem) {
      if (btnItem.name === this.tableBtnConf.buttons[0].name) {
        this.dialog.add = true
      } else if (btnItem.name === this.tableBtnConf.buttons[1].name) {
        this.$confirm('此操作将恢复原始的所有模板, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const data = await this.$axios.post('/enjoy/allRenew')
          this.$message({
            type: data.type,
            message: data.msg
          })
          this.getInitData()
        })
      }
    },
    myTableOptClick(optItem, row) {
      try {
        this.activeRow = Object.assign({}, row)
        if (optItem.name === this.tableOptConf.buttons[0].name) {
          this.dialog.modify = true
        } else if (optItem.name === this.tableOptConf.buttons[1].name) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            const data = await this.$axios.post('/enjoy/delete', {
              idFmt: row.idFmt
            })
            this.$message({
              type: 'success',
              message: data.msg
            })
            this.getInitData()
          })
        } else if (optItem.name === this.tableOptConf.buttons[2].name) {
          console.log(JSON.stringify(row))
          this.$router.push(
            '/template/enjoy/user?name=' + row.name + '&idFmt=' + row.idFmt
          )
        } else if (optItem.name === this.tableOptConf.buttons[3].name) {
          this.$confirm('此操作将修改模板, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            const data = await this.$axios.post('/enjoy/renew', this.activeRow)
            this.$message({
              type: data.type,
              message: data.msg
            })
            this.getInitData()
          })
        }
      } catch (e) {
        console.log(e)
      }
    },
    mySearchBtnClick(btnItem) {
      btnItem.loading = true
      this.getInitData()
      btnItem.loading = false
    },
    async getInitData() {
      try {
        let params = Object.assign({}, this.model)
        params = delFormNullParam(params)
        const data = await this.$axios.post(
          '/enjoy/page?size=' +
            this.page.size +
            '&current=' +
            this.page.current,
          params
        )
        this.tableData = data.data
      } catch (e) {
        this.tableData = { records: [] }
        console.log(e)
      }
    },
    closed(flag) {
      if (flag != null) {
        this.dialog[flag] = false
      }
    },
    success(flag) {
      this.closed(flag)
      this.getInitData()
    },
    currentChange(current) {
      this.page.current = current
      this.getInitData()
    },
    sizeChange(size) {
      this.page.size = size
      this.getInitData()
    },
    async getFunctionOptions() {
      const data = await this.$axios.post('/enjoy/selectFunctionTypes')
      const elCol = formItemsGetByName(this.formItems, 'functionName')
      elCol.elFormItem.options = data.data.functions
      this.functionTypes = data.data.functionTypes
      this.getTypes()
    },
    getTypes() {
      const elCol = formItemsGetByName(this.formItems, 'groupName')
      if (this.model.functionName) {
        if (this.functionTypes) {
          elCol.elFormItem.options = this.functionTypes[this.model.functionName]
        }
      } else {
        elCol.elFormItem.options = []
      }
    }
  }
}
</script>

<style scoped></style>
